iT邦幫忙

2

CSS - Grid 介紹與使用

Ares 2020-06-02 21:57:538082 瀏覽
  • 分享至 

  • xImage
  •  

Gird 是一種 CSS 的網格系統,他出來也有一陣子了,直到最近突然想到我還沒認真看過XD,所以想說該來還債拉,這篇就跟大一起來學習一下如何使用 Gird,那麼開始吧~

開始使用

GirdFlex 一樣有內外容器的概念,首先是 html

<body>
  <div class="container">
    <div>header</div>
    <div>menu</div>
    <div>content1</div>
    <div>content2</div>
  </div>
</body>

接著只需在外層設定 display: grid 即可開始使用

.container {
  display: grid;
}

新方法介紹

開始排版之前我們先介紹幾個 Grid 中常用的好東西

  • fr:等分的概念,類似 Flex 中的 flex-grow,例:1fr
  • repeat():可重複某值,傳入兩個參數,次數,例:repeat(2, 1fr)
  • minmax():可將值限定在某區間,傳入兩個參數,最小值最大值,例:minmax(20px, auto)

排版方法

再來介紹排版方法,基本上可由以下幾種去變換自己想要的版型

方法1 - 明確設定行列的寬高

使用以下屬性可以直接於外部容器設定自己行列的寬高

.container {
  display: grid;
  grid-template-rows: 100px 300px;
  grid-template-columns: 20% 80%;
}

方法1-範例

方法2 - 設定行列的寬高預設值

設定預設值後所以內容都會依照預設寬高,此方法可以應用在格線系統

.container {
  display: grid;
  grid-auto-rows: 100px 200px;
  grid-auto-columns: 1fr;
}

方法2-範例

方法3 - 自定義區塊

自定義區塊須先在外部容器定義區塊分布,再於內部容器設定其區塊名稱,但要注意以下

  • 定義外部區塊時同名稱的區塊不能隔開
  • . 可用於將區塊留空
<body>
  <div class="container">
    <div class="header">header</div>
    <div class="menu">menu</div>
    <div class="content1">content1</div>
    <div class="content2">content2</div>
  </div>
</body>
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 150px repeat(2, 1fr);
  grid-template-areas: 
  "header header header"
  "menu . content2"
  "menu content1 content2";
}
.header {
  grid-area: header;
}
.menu {
  grid-area: menu;
}
.content1 {
  grid-area: content1;
}
.content2 {
  grid-area: content2;
}

方法3-範例

方法4 - 設定內部容器位置

此方法須先將外部容器格線設定好,然後在內部容器直接定義其位置,這邊的屬性是用來做定義,從左到右、從上到下,最上面與最左邊分別為起點,也就是 1,終點則是看要到第幾條線,可以設定的值還有 auto(表示自動)與 span <line>(表示所占線數)

.container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
  grid-template-columns: 20% 30% 30% 20%;
}
.header {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: span 3;
}
.menu {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}
.content1 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
.content2 {
  grid-row: 2 / 4;
  grid-column: 4 / auto;
}

方法4-範例

其他屬性

除了上述的屬性用來排版以外,還有一些其他的屬性可以操控,如下

排列方向

Grid 中設定排列方向的屬性是 grid-auto-flow,可使用的屬性有以下:

  • row:排列方向以為優先,超過則排列到下一行,此為預設值
  • column:排列方向以為優先,超過則排列到下一列
  • dense:若前方有空位,則往前排列,也可與 rowcolumn 混用
<body>
  <div class="container">
    <div class="item-fixed-1">item-fixed-1</div>
    <div class="item-fixed-2">item-fixed-2</div>
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
    <div>content4</div>
  </div>
</body>
.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(2, 1fr);
  /* grid-auto-flow: row; */
  /* grid-auto-flow: column; */
  /* grid-auto-flow: row dense; */
  /* grid-auto-flow: column dense; */
}
.item-fixed-1 {
  grid-column-start: 2;
}
.item-fixed-2 {
  grid-row-start: 3;
}

以下固定 item-fixed-1item-fixed-2 的位置,並改變 grid-auto-flow ,可以觀察其他容器有什麼變化

grid-auto-flow: row

grid-auto-flow-範例1

grid-auto-flow: column

grid-auto-flow-範例2

grid-auto-flow: row dense

grid-auto-flow-範例3

grid-auto-flow: column dense

grid-auto-flow-範例4

間距

間距比較容易,可使用以下屬性設定
grid-row-gap:每行間距
grid-column-gap:每列間距
grid-gapgrid-row-gapgrid-column-gap 的縮寫

<body>
  <div class="container">
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
    <div>content4</div>
  </div>
</body>
.container {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px;
  grid-column-gap: 20px;
  /* grid-gap: 10px 20px; */
}

間距-範例

對齊方式

對齊方式基本上與 Flex 滿類似的,可以分為外部容器內部容器來看,有以下值可用

  • alignstart | end | center | stretch;
  • justifystart | end | center | stretch | space-around | space-between | space-evenly;

首先原來的樣子如下,之後皆以 center 屬性來示範

<body>
  <div class="container">
    <div class="self">content1</div>
    <div>content2</div>
    <div>content3</div>
    <div>content4</div>
    <div>content5</div>
    <div>content6</div>
  </div>
</body>
.container {
  display: grid;
  width: 500px;
  height: 400px;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 200px);
}

對齊方式-範例1

外部容器

  • justify-content:外部容器x軸對齊方式
  • align-content:外部容器y軸對齊方式
  • justify-items:內部容器x軸對齊方式
  • align-items:內部容器y軸對齊方式
.container {
  justify-content: center;
  align-content: center;
}

對齊方式-範例2

.container {
  justify-items: center;
  align-items: center;
}

對齊方式-範例3

內部容器

  • justify-self:該容器x軸對齊方式
  • align-self:該容器y軸對齊方式
.self {
  justify-self: center;
  align-self: center;
}

對齊方式-範例4

(P.S.在外層設定 justify-itemsalign-items 就相當於為內層所有容器設定 justify-selfalign-self

屬性列表

最後統整一下所有的屬性~

外層屬性

grid-template-rows // row高度:數量決定列數
grid-template-columns // column寬度:數量決定欄數
grid-template-areas // 定義網格區塊
grid-template // 縮寫:areas / rows /columns

grid-auto-rows // row預設高度
grid-auto-columns // column預設寬度

grid-row-gap // row間距
grid-column-gap // column間距
grid-gap // 縮寫:row / column

grid-auto-flow // 排列方向
grid // 縮寫:上面所有屬性

justify-content // 外部容器對齊方式:x軸
align-content // 外部容器對齊方式:y軸
justify-items // 內部容器對齊方式:x軸
align-items // 內部容器對齊方式:y軸

內層屬性

grid-row-start // row起點
grid-row-end // row終點
grid-row // 縮寫:start / end

grid-column-start // column起點
grid-column-end // column終點
grid-column // 縮寫:start / end

// 縮寫:上面所有屬性或是定義網格區塊
grid-area // row-start / column-start / row-end / column-end

justify-self // 對齊方式:x軸
align-self // 對齊方式:y軸

結語

Grid 有些地方真的滿靈活的,且與 Flex 一起用感覺能相輔相成,但是目前 Grid 支援度還不是很優,切版目前看起來還是會以 Flex 為主,若是以後版面越來越複雜的話,感覺就會用到 Grid 了,總之現在先學起來放著XD,希望完全支援的那天可以快來~


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言